<template>
	<view class="content">
		<view style="height: 1rpx; width: 100%;"></view>
		<view class="phone_titile">
			忘记密码
		</view>
		<view class="forms">
			<view class="forms_li">
				<u--input
				    placeholder="请输入您的手机号码"
				    border="bottom"
				    clearable
						placeholderStyle="color: #666; font-size:36rpx;"
						:fontSize="'36rpx'"
						:color="'#000'"
						v-model="phoneInput"
				  ></u--input>
			</view>
			<view class="forms_li">
				<u-input
				    placeholder="请输入新密码"
				    border="bottom"
				    clearable
						:password="passwordTrue"
						placeholderStyle="color: #666; font-size:36rpx;"
						:fontSize="'36rpx'"
						:color="'#000'"
						v-model="passwordInput"
				  >
						<template #suffix>
							<text v-if="passwordTrue" @click="passwordTrue=false" class="iconfont icon-yanjing on"></text>
							<text v-else @click="passwordTrue=true" class="iconfont icon-biyan on"></text>
						</template>
					</u-input>
			</view>
			<view class="forms_li" style="padding-top: 0;">
				<u-input
				    placeholder="请输入验证码"
				    border="bottom"
				    clearable
						placeholderStyle="color: #666; font-size:36rpx;"
						:fontSize="'36rpx'"
						:color="'#000'"
						v-model="codeInput"
						:maxlength="6"
						:type="'number'"
				  >
						<template #suffix>
							<u-code
								ref="uCodeRef"
								@change="codeChange"
								seconds="60"
								changeText="X秒重新获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="success"
								size="mini"
							></u-button>
						</template>
					</u-input>
			</view>
		</view>
		<view class="popup_button">
			<button class="buttons" v-if="phoneInput!='' && passwordInput!='' && codeInput!=''" type="circle" @click="loginFun">重置密码</button>
			<button class="buttons on" v-else type="circle">重置密码</button>
		</view>		
		<view class="bottems" v-if="false">
			<view class="checkbox">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" v-model="checkedOne" activeColor="#16BB5D" shape="circle"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="cont">我已阅读并同意<navigator class="link" url="/pagesA/pages/personal/profile?id=1" hover-class="none">《服务协议》</navigator>和<navigator class="link" url="/pagesA/pages/personal/profile?id=2" hover-class="none">《隐私政策》</navigator></view>
		</view>
		
		<!--加载框 start-->
		<loading :visible="loadingTrue" :show="false"></loading>
		<!--加载框 end-->
	</view>
</template>

<script setup>
	import { ref,reactive } from "vue"
	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	//请求接口
	import {
	  postSmsSend,postAuthPasswd
	} from "@/service/index.js"
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	
	const checkedOne=ref(true);
	const passwordTrue=ref(true);
	
	const phoneInput = ref('');
	const passwordInput = ref('');
	const codeInput = ref('');
	const tips = ref('重新');
	
	//初始化基本数据
	const loadingTrue = ref(false);

	//协议选中
	const checkboxChange=(e)=>{
		checkedOne.value=e;
	}
	
	//账号密码登录
	async function loginFun(){
		if(phoneInput.value==''){
			uni.showToast({
			    title:'请输入您的用户名/手机号码!',
					icon:'none',
			    duration: 2000
			});	
		}else if(passwordInput.value==''){
			uni.showToast({
			    title:'请输入正确的密码!',
					icon:'none',
			    duration: 2000
			});	
		}else if(codeInput.value==''){
			uni.showToast({
			    title:'请输入验证码!',
					icon:'none',
			    duration: 2000
			});	
		}else{
			loadingTrue.value=true;
			//请求账号密码接口
			await postAuthPasswd({
				mobile: phoneInput.value,
				password: passwordInput.value,
				password_confirmation: passwordInput.value,
				sms_code:codeInput.value
			}).then((res)=>{
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					complete: () => {
						outerHref('',4);
					}
				});
			}).finally(()=>{
				loadingTrue.value=false;
			})
		}	
	}
	
	function codeChange(text) {
		tips.value = text;
	}
	
	const uCodeRef=ref(null);
	
	//发送短信
	function getCode() {
		if(phoneInput.value==''){
			uni.showToast({
			    title:'请输入您的手机号码!',
					icon:'none',
			    duration: 2000
			});	
		}else if(passwordInput.value==''){
			uni.showToast({
			    title:'请输入正确的密码!',
					icon:'none',
			    duration: 2000
			});	
		}else if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			postSmsSendFun();
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}
	
	
	//获取验证码
	async function postSmsSendFun(){
		await postSmsSend({
			mobile:phoneInput.value,
			send_from:1
		})
		.then((res)=>{
			uni.hideLoading();
			// 这里此提示会被this.start()方法中的提示覆盖
			uni.$u.toast('验证码已发送');
			// 通知验证码组件内部开始倒计时
			uCodeRef.value.start();
		})
		.finally((res)=>{
		})
	}
	
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #fff;
	// background: #fff;
	
	//#ifdef H5 
	min-height: calc((100vh - 44px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
	position: relative;
}
.phone_titile{
	margin-top: 80rpx;
	padding-left: 60rpx;
	font-size: 52rpx;
	color: #333333;
	font-weight: 700;
}
.popup_button{
	display: flex;
	justify-content: center;
	margin: 0 50rpx;
	margin-top: 50rpx;
	.buttons{
		height: 90rpx;
		line-height: 90rpx;
		padding: 0rpx 84rpx;
		margin: 0;
		font-size: 32rpx;
		border-radius: 50rpx;
		background:#16BB5D;
		color: #fff;
		width: 100%;
		transition: 0.3s all;
	}
	.buttons:active{
		background:#0aab4f;
	}
	.buttons.on{
		background: #F6F6F6;
		color: #AAAAAA;
	}
}

.buttons::after{
	border: none;
}
.bottems{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	.cont{
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 24rpx;
		color: #9B9B9B;
		.link{
			color: #0aab4f;
		}
	}
}
.forms{
	margin-top: 120rpx;
	padding:0 50rpx;
	.forms_li{
		padding:10rpx 0;
		.iconfont{
			font-size: 38rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
}

:deep(.u-input){
	padding: 24rpx 18rpx !important;
}
:deep(.u-button--mini){
	height: 60rpx !important;
}
:deep(.u-button--success){
	background-color: #16BB5D;
	 border-color: #16BB5D;
}

</style>
